<template>
  <view class="content">
    <!-- 排号信息列表 -->
    <view class="phxx-list">
      <view class="item" :key="item.id" v-for="item in productList">
        <records-card :data="item"></records-card>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
import { getRecordsList } from '@/api/product';
import { getDictList } from '@/api/login';

export default {
  data() {
    return {
      rowId: '',
      isMore: 'more',
      coalTypeList: [],
      productList: [],
      queryParam: {
        pageNo: 1,
        pageSize: 5
      }
    };
  },

  async onLoad(option) {
    this.rowId = option.id;
    this.isMore = 'more';
    this.queryParam.pageNo = 1;
    this.productList = [];
    await this.getDictList();
    this.getRecordsList();
  },

  onPullDownRefresh() {
    this.isMore = 'more';
    this.queryParam.pageNo = 1;
    this.productList = [];
    this.getRecordsList();
  },

  onReachBottom() {
    if (this.isMore == 'more') {
      this.queryParam.pageNo++;
      this.getRecordsList();
    }
  },

  methods: {
    async getDictList() {
      const res = await getDictList();
      if (res.code === 0) {
        this.coalTypeList = (res?.data || []).filter(
          (e) => e.dictType === 'coal_type'
        );
      }
    },

    async getRecordsList() {
      try {
        const data = {
          supplierProductId: this.rowId,
          ...this.queryParam
        };
        const res = await getRecordsList(data);
        if (res.code == 0) {
          const result = res.data.list || [];
          this.productList = [
            ...this.productList,
            ...this.exchangeCoalTypeLabel(result)
          ];
          if (res?.data?.total == this.productList.length) {
            this.isMore = 'noMore';
          } else {
            this.isMore = 'more';
          }
        }
        wx.stopPullDownRefresh();
      } catch (e) {
        return false;
      }
    },

    exchangeCoalTypeLabel(result) {
      return result.map((e) => {
        e.productType = this.coalTypeList.find(
          (m) => m.value === e.productType.toString()
        )?.label;
        return e;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.phxx-list {
  padding: 20rpx;
  .item + .item {
    margin-top: 20px;
  }
}
</style>
